<template>
  <div>
    <div class="app-container">
      <SearchArea
        @addEnterprise="addEnterprise"
        @checkout2="checkout2"
        style="margin-bottom: 10px"
      />
      <addEnterprise ref="addEnterpriseTag" @addData="addData" />
      <EditIndex ref="editIndex" :tip="'注：密码填写并保存后，企业登录密码将变更为最新'" @changedDate="changedDate"></EditIndex>
      <el-table
        v-loading="listLoading"
        :data="d_list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        :header-row-class-name="tableRowClassName"
      >
        <el-table-column align="center" label="企业编号">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column align="center" label="企业账号">
          <template slot-scope="scope">{{ scope.row.userCode }}</template>
        </el-table-column>
        <el-table-column label="企业名称" width="140">
          <template slot-scope="scope">{{ scope.row.userName }}</template>
        </el-table-column>
        <el-table-column label="联系人" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.contacts }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.loginLock | statusFilter">
              {{
              scope.row.loginLock == 0 ? "启用" : "冻结"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="创建时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.createTime | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <EButton :title="'编辑'" :color="'success'" @edit="edit(scope.$index)"></EButton>
            <span v-if="scope.row.loginLock == 0">
              <EButton :title="'冻结'" :color="'info'" @freeze="freeze(scope.$index)"></EButton>
            </span>
            <span v-else>
              <EButton :title="'启用'" :color="'primary'" @freeze="freeze(scope.$index)"></EButton>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <index :total="total" @addPagination="addPagination"></index>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import SearchArea from "../../components/SearchArea2/index";
import EButton from "../../components/ButtonBox/index";
import addEnterprise from "../../components/EditorEnterprise/index";
import EditIndex from "../../components/EditorEnterprise/EditIndex";
import index from "../../components/Pagination/index";
import {
  getEnterprises,
  getEnterprise,
  checkStatus,
} from "../../utils/enterpriselist";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        "0": "success",
        "1": "gray",
      };
      return statusMap[status];
    },
    dataFormat() {
      let dt = new Date();
      let y = dt.getFullYear();
      let m = dt.getMonth() + 1;
      let d = dt.getDate();
      let h = dt.getHours();
      let f = dt.getMinutes();
      let s = dt.getSeconds();
      return `${y}-${m}-${d}/${h}:${f}:${s}`;
    },
  },
  components: {
    SearchArea,
    EButton,
    addEnterprise,
    EditIndex,
    index,
  },
  data() {
    return {
      //在编辑后存下标,以便改变data后从另一个视图返回替换源数据
      index: "",
      listLoading: false,
      d_list: [],
      pageIndex: 1,
      total: 5,
    };
  },
  async created() {
    // getEnterprises("","get")
    //   .then(res => {
    //   return res.data
    // }).then(res=>{
    //   this.d_list=res
    // })
    getEnterprise("/findByPage", "post", 1, 5)
      .then((res) => {
        return res.data;
      })
      .then((res) => {
        this.d_list = res.records;
        this.total = res.pages  * 10;
      });
  },
  methods: {
    //分页
    addPagination(index) {
      this.pageIndex = index;
      getEnterprise("/findByPage", "post", index, 5)
        .then((res) => {
          return res.data;
        })
        .then((res) => {
          this.d_list = res.records;
        });
    },
    addData(e) {
      this.d_list.push(e);
    },
    addEnterprise() {
      this.$refs.addEnterpriseTag.changeDisable();
    },
    edit(index) {
      this.index = index;
      // this.i_list.forEach(item=>{
      //   console.log(item[index]);
      // })
      this.$refs.editIndex.changeDisable(this.d_list[index]);
    },
    changedDate(changedData) {
      this.d_list.splice(this.index, 1, changedData);
    },
    checkout2(data) {
      console.log(data);
      let totalData = {
        pageNum: 1,
        pageSize: "5",
        queryCondition: {
          id: data.id,
          userName: data.userName,
          loginLock: data.loginLock,
        },
      };
      checkStatus("/findByPage", "post", totalData)
        .then((res) => res.data)
        .then((res) => {
          this.d_list = res.records;
          this.total=res.pages*10;
        });
    },
    freeze(index) {
      this.$confirm("确定冻结该用户吗？", "冻结用户", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          checkStatus("/updateStatus", "put", {
            userCode: this.d_list[index].userCode,
            loginLock: this.d_list[index].loginLock == 0 ? 1 : 0,
          })
            .then((rawRes) => rawRes.data)
            .then((res) => {
              if (res == "success") {
                this.$message({
                  type: "success",
                  message: "冻结成功~",
                });
                this.d_list[index].loginLock =
                  this.d_list[index].loginLock == 0 ? 1 : 0;
              }
            });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          });
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
    },
  },
};
</script>

<style scoped></style>
